<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>物流线路信息</title>
    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <nav th:replace="~{system/sys/sys_topbar::top}"></nav>
        <form class="form-inline" action="/route_update_after" method="post">
            <input type="hidden" name="page" th:value="${page}">
            <input type="hidden" name="routeId" th:value="${routeInfo.routeId}">
            <div class="container" style="padding-top: 20px">
                <div class="row form-group" style="padding-left: 20rem">
                    <label for="routeCompany" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        公司名称
                    </label>
                    <input th:value="${routeInfo.routeCompany}" type="text" name="routeCompany" class="form-control" id="routeCompany" placeholder="请输入公司名称" style="width: 50rem">
                </div>
                <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
                <div class="row form-group" style="padding-left: 20rem">
                    <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        出发地
                    </label><br>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceProvince" id="province1">
                        <option th:text="${routeInfo.routeResourceProvince}">请选择</option>
                    </select>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceCity" id="city1">
                        <option th:text="${routeInfo.routeResourceCity}">请选择</option>
                    </select>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceCountry" id="country1">
                        <option th:text="${routeInfo.routeResourceCountry}">请选择</option>
                    </select>
                </div><br><br>
                <div class="row form-group" style="padding-left: 20rem">
                    <label for="routeResourceAddress" style="margin-right:42px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        出发地址
                    </label>
                    <input th:value="${routeInfo.routeResourceAddress}" type="text" name="routeResourceAddress" class="form-control" id="routeResourceAddress" placeholder="请输入出发地址" style="width: 150px">
                </div><br>
                <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                    <label for="routeResourcePerson" style="margin-right:15px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        出发地联系人
                    </label>
                    <input th:value="${routeInfo.routeResourcePerson}" type="text" name="routeResourcePerson" class="form-control" id="routeResourcePerson" placeholder="请输入出发地联系人" style="width: 150px">
                </div><br>
                <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                    <label for="routeResourcePersonPhone" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        出发地联系方式
                    </label>
                    <input th:value="${routeInfo.routeResourcePersonPhone}" type="text" name="routeResourcePersonPhone" class="form-control" id="routeResourcePersonPhone" placeholder="请输入出发地联系方式" style="width: 150px">
                </div>
                <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
                <div class="row form-group" style="padding-left: 20rem">
                    <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        到达地
                    </label><br>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationProvince" id="province2">
                        <option th:text="${routeInfo.routeDestinationProvince}">请选择</option>
                    </select>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationCity" id="city2">
                        <option th:text="${routeInfo.routeDestinationCity}">请选择</option>
                    </select>
                    <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationCountry" id="country2">
                        <option th:text="${routeInfo.routeDestinationCountry}">请选择</option>
                    </select>
                </div><br><br>
                <div class="row form-group" style="padding-left: 20rem">
                    <label for="routeDestinationAddress" style="margin-right:42px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        到达地址
                    </label>
                    <input th:value="${routeInfo.routeDestinationAddress}" type="text" name="routeDestinationAddress" class="form-control" id="routeDestinationAddress" placeholder="请输入到达地址" style="width: 150px">
                </div><br>
                <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                    <label for="routeDestinationPerson" style="margin-right:15px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        到达地联系人
                    </label>
                    <input th:value="${routeInfo.routeDestinationPerson}" type="text" name="routeDestinationPerson" class="form-control" id="routeDestinationPerson" placeholder="请输入到达地联系人" style="width: 150px">
                </div><br>
                <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                    <label for="routeDestinationPersonPhone" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        到达地联系方式
                    </label>
                    <input th:value="${routeInfo.routeDestinationPersonPhone}" type="text" name="routeDestinationPersonPhone" class="form-control" id="routeDestinationPersonPhone" placeholder="请输入到达地联系方式" style="width: 150px">
                </div>
                <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
                <div class="row form-group" style="padding-left: 20rem">
                    <label for="routePriceLight" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        轻货价格
                    </label>
                    <input th:value="${routeInfo.routePriceLight}" type="text" name="routePriceLight" class="form-control" id="routePriceLight" placeholder="请输入轻货价格" style="width: 50rem">
                </div>
                <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
                <div class="row form-group" style="padding-left: 20rem">
                    <label for="routePriceHeavy" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                        重货价格
                    </label>
                    <input th:value="${routeInfo.routePriceHeavy}" type="text" name="routePriceHeavy" class="form-control" id="routePriceHeavy" placeholder="请输入重货价格" style="width: 50rem">
                </div>
                <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            </div>
            <div class="container">
                <div class="row text-center">
                    <button type="submit" class="btn btn-primary" style="margin-right: 50px; width: 90px; margin-bottom: 40px">确认修改</button>
                    <a th:href="@{'/route_manage?page='+${page}}"><button type="button" class="btn btn-primary" style="margin-right: 50px; width: 90px; margin-bottom: 40px">返回</button></a>
                </div>
            </div>

        </form>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script>
        //出发地
        $(function () {
            ProvinceBind1();

            $("#province1").change(function () {
                CityBind1();
            })

            $("#city1").change(function () {
                CountryBind1();
            })
        })
        function ProvinceBind1() {
            // $("#province1").html("");
            var str = "<option> 请选择省 </option>";
            $.ajax({
                url: "/getProvince",
                success: function (data) {
                    $.each(data.data, function (i,item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    })
                    $("#province1").append(str);
                },
                error: function () {
                    alert("Error省");
                }
            })
        }

        function CityBind1() {
            $("#city1").html("");
            var options = $("#province1 option:selected");
            var province = options.val();//province为选中省份的cityName
            // alert(province);
            if (province == "")
                return ;
            $("#city1").html("");
            var str="<option> 请选择市 </option>";

            $.ajax({
                url: "/getCities",
                data: {"parentCity": province},
                success: function (data) {
                    $.each(data.data, function (i, item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    });
                    $("#city1").append(str);
                },
                error: function () {
                    alert("Error市");
                }
            });
        }

        function CountryBind1() {
            $("#country1").html("");
            var options = $("#city1 option:selected");
            var city = options.val();
            if (city == "")
                return;
            $("#country1").html();
            var str="<option> 请选择县 </option>";

            $.ajax({
                url: "/getCountries",
                data: {"parentCity": city},
                success: function (data) {
                    $.each(data.data, function (i, item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    });
                    $("#country1").append(str);
                }
            });
        }

        //到达地
        $(function () {
            ProvinceBind2();

            $("#province2").change(function () {
                CityBind2();
            })

            $("#city2").change(function () {
                CountryBind2();
            })
        })
        function ProvinceBind2() {
            // $("#province1").html("");
            var str = "<option> 请选择省 </option>";
            $.ajax({
                url: "/getProvince",
                success: function (data) {
                    $.each(data.data, function (i,item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    })
                    $("#province2").append(str);
                },
                error: function () {
                    alert("Error省");
                }
            })
        }

        function CityBind2() {
            $("#city2").html("");
            var options = $("#province2 option:selected");
            var province = options.val();//province为选中省份的cityName
            // alert(province);
            if (province == "")
                return ;
            $("#city2").html("");
            var str="<option> 请选择市 </option>";

            $.ajax({
                url: "/getCities",
                data: {"parentCity": province},
                success: function (data) {
                    $.each(data.data, function (i, item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    });
                    $("#city2").append(str);
                },
                error: function () {
                    alert("Error市");
                }
            });
        }

        function CountryBind2() {
            $("#country2").html("");
            var options = $("#city2 option:selected");
            var city = options.val();
            if (city == "")
                return;
            $("#country2").html();
            var str="<option> 请选择县 </option>";

            $.ajax({
                url: "/getCountries",
                data: {"parentCity": city},
                success: function (data) {
                    $.each(data.data, function (i, item) {
                        str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                    });
                    $("#country2").append(str);
                }
            });
        }
    </script>
</body>
</html>
